import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../widgets/platform/adaptive_card.dart';
import '../../widgets/platform/adaptive_button.dart';

/// 智能电子表格仪表板页面
/// 提供访问数据库连接和电子表格功能的入口
class SpreadsheetDashboardPage extends ConsumerWidget {
  const SpreadsheetDashboardPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const SelectableText('智能电子表格'),
        backgroundColor: Colors.blue.shade50,
        foregroundColor: Colors.blue.shade700,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 页面标题和说明
              AdaptiveCard(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SelectableText(
                      '智能电子表格',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 8),
                    SelectableText(
                      '将数据库表转换为智能电子表格界面，支持离线操作',
                      style: TextStyle(
                        color: Colors.grey.shade600,
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 24),

              // 功能介绍
              AdaptiveCard(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SelectableText(
                      '功能特性',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    _buildFeatureItem(
                      Icons.link,
                      '数据库连接',
                      '支持连接 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB',
                    ),
                    const SizedBox(height: 12),
                    _buildFeatureItem(
                      Icons.table_chart,
                      '智能表格',
                      '类似 NocoDB 的电子表格界面，支持数据编辑和查看',
                    ),
                    const SizedBox(height: 12),
                    _buildFeatureItem(
                      Icons.offline_pin,
                      '离线操作',
                      '支持离线查看和编辑数据，联网后自动同步',
                    ),
                    const SizedBox(height: 12),
                    _buildFeatureItem(
                      Icons.search,
                      '数据搜索',
                      '强大的数据搜索和过滤功能',
                    ),
                    const SizedBox(height: 12),
                    _buildFeatureItem(
                      Icons.sync,
                      '数据同步',
                      '自动同步本地和服务器数据',
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 24),

              // 操作入口
              AdaptiveCard(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SelectableText(
                      '开始使用',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    Row(
                      children: [
                        Expanded(
                          child: AdaptiveButton(
                            onPressed: () => _navigateToDbConnection(context),
                            isPrimary: true,
                            child: const SelectableText('连接数据库'),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: AdaptiveButton(
                            onPressed: () =>
                                _navigateToSampleSpreadsheet(context),
                            isPrimary: false,
                            child: const SelectableText('查看示例'),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    AdaptiveButton(
                      onPressed: () => _navigateToConnectionHistory(context),
                      isPrimary: false,
                      child: const SelectableText('连接历史'),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 24),

              // 使用说明
              AdaptiveCard(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SelectableText(
                      '使用说明',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    const SelectableText(
                      '1. 点击"连接数据库"配置数据库连接\n'
                      '2. 选择要操作的数据表\n'
                      '3. 在电子表格界面中查看和编辑数据\n'
                      '4. 支持离线操作，数据会自动同步',
                      style: TextStyle(
                        height: 1.5,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建功能项
  Widget _buildFeatureItem(IconData icon, String title, String description) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(icon, color: Colors.blue),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SelectableText(
                title,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
              const SizedBox(height: 4),
              SelectableText(
                description,
                style: TextStyle(
                  color: Colors.grey.shade600,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  /// 导航到数据库连接页面
  void _navigateToDbConnection(BuildContext context) {
    context.push('/spreadsheet/connect');
  }

  /// 导航到示例电子表格
  void _navigateToSampleSpreadsheet(BuildContext context) {
    // 导航到示例表格，使用默认的项目ID 1
    context.push('/spreadsheet/sample', extra: {
      'projectId': 1,
    });
  }

  /// 导航到连接历史页面
  void _navigateToConnectionHistory(BuildContext context) {
    context.push('/spreadsheet/connections');
  }
}
